<template>
	<view>
		<up-popup :show="showStorePopup" :round="20" mode="bottom" @close="close" @open="open">
			<view class="popup-wrap">
				<!-- :indicator-style="indicatorStyle" :value="value" -->
				<view class="btn-group flex">
					<view class="cancel" @click="close">取消</view>
					<view class="title">门店</view>
					<view class="confirm" @click="close">确认</view>
				</view>
				<!-- <picker-view @change="bindChange" class="picker-view">
					<picker-view-column>
						<view class="item" v-for="(item, index) in storeList" :key="index">{{ item.storeName }}</view>
					</picker-view-column>
				</picker-view> -->

				<view class="picker-view">
					<view :class="['item', select == item.uuid ? 'active' : '']" @click="selectStore(item)"
						v-for="(item, index) in storeList" :key="index">
						{{ item.storeName }}
					</view>
				</view>
			</view>
		</up-popup>
	</view>
</template>

<script setup>
import {
	ref,
	reactive,
	onMounted
} from "vue";
import {
	postRequest
} from "@/reuqest/request.js";

const showStorePopup = ref(false)

const emit = defineEmits(['select'])

const select = ref("")

const storeList = ref([])

const open = () => {
	showStorePopup.value = true;
}

const close = () => {
	showStorePopup.value = false
}

const bindChange = (e) => {
	emit('select', storeList.value[e.detail.value])
}

const selectStore = (item) => {
	select.value = item.uuid
}

const getData = () => {
	postRequest("/wx-operation/api/v1/bm/store/page", {
		pageNum: 1,
		pageSize: 2000,
	}).then(res => {
		if (res.bizCode === "00000") {
			storeList.value = res.data?.list || [];
			emit('select', storeList.value[0])
		}
	})
}
onMounted(() => {
	getData()
})

defineExpose({ open, close })
</script>

<style scoped lang="less">
.popup-wrap {
	width: 100%;
	height: 60vh;
	/* background: #fff; */

	.btn-group {
		margin: 30rpx 0;
		justify-content: space-between;
		padding: 0 30px;

		.cancel {
			color: #333;
		}

		.title {
			width: 50%;
			text-align: center;
			color: #000;
			font-weight: bold;
		}

		.confirm {
			color: #B98A73;
		}
	}
}

.picker-view {
	width: 750rpx;
	height: 600rpx;
	// overflow: auto;
	// margin-top: 20rpx;
}
</style>